<template>
  <div class="confirmOrderContainer">
    <van-nav-bar title="确认订单" fixed placeholder z-index="999" left-arrow @click-left="GOback" @click-right="Login" :border="false">
      <template #right>
        <div class="rightText">登录|注册</div>
      </template>
    </van-nav-bar>
    <!-- 收货地址 -->
    <div class="address_container" @click="chooseAdd">
      <div class="address_empty_left">
        <van-icon name="location-o" color="#3190e8" size="0.82rem" />
        <div class="address_detail_container" v-if="ShippingAddress.length">
          <header>
            <span>{{ShippingAddress[addressIndex.index].name}} </span>
            <span>先生 </span>
            <span>{{ShippingAddress[addressIndex.index].phone}}</span>
          </header>
          <div class="address_detail ellipsis">
            <span style="background-color: rgb(49, 144, 232);">{{ShippingAddress[addressIndex.index].tag}}</span>
            <p>{{[addressIndex.index].address_detail}}</p>
          </div>
        </div>
        <p class="add_address" v-else>请添加一个收货地址</p>
      </div>
      <van-icon name="arrow" color="#999" size="0.7rem" />
    </div>
    <!-- 送达时间 -->
    <section class="delivery_model delivery_model container_style">
      <p class="deliver_text">送达时间</p>
      <div class="deliver_time">
        <p>尽快送达 | 预计 {{SettlemenData.delivery_reach_time}}</p>
        <p>蜂鸟专送</p>
      </div>
    </section>
    <!-- 支付方式 -->
    <section class="pay_way container_style" @click="show = true">
      <header class="header_style">
        <span>支付方式</span>
        <div class="more_type" v-if="SettlemenData.payments">
          <span class="ellipsis">{{SettlemenData.payments[1].name}}</span>
          <van-icon name="arrow" color="#999" size="0.55rem" />
        </div>
      </header>
      <section class="hongbao">
        <span>红包</span>
        <span>暂时只在饿了么 APP 中支持</span>
      </section>
    </section>
    <!-- 商家食品价格列表 -->
    <section class="food_list" v-if="SettlemenData.cart">
      <header>
        <img :src="'//elm.cangdu.org/img/'+SettlemenData.cart.restaurant_info.image_path" alt="">
        <p>{{SettlemenData.cart.restaurant_info.name}}</p>
      </header>
      <ul class="food_list_ul">
        <li class="food_item_style" v-for="item in SettlemenData.cart.groups[0]" :key="item.id">
          <p class="food_name ellipsis">{{item.name}}</p>
          <div class="num_price">
            <span>x {{item.quantity}}</span>
            <span>¥{{item.price}}</span>
          </div>
        </li>
      </ul>
      <!-- 餐盒 -->
      <div class="food_item_style">
        <p class="food_name ellipsis">{{SettlemenData.cart.extra[0].name}}</p>
        <div class="num_price">
          <span></span>
          <span>¥ {{SettlemenData.cart.extra[0].price}}</span>
        </div>
      </div>
      <!-- 配送费 -->
      <div class="food_item_style">
        <p class="food_name ellipsis">配送费</p>
        <div class="num_price">
          <span></span>
          <span>¥ {{SettlemenData.cart.deliver_amount}}</span>
        </div>
      </div>
      <!-- 订单 待支付 -->
      <div class="food_item_style total_price">
        <p class="food_name_left food_name ellipsis ">订单 ¥{{SettlemenData.cart.total}}</p>
        <div class="num_price" v-if="SettlemenData.cart">
          <span>待支付 ¥{{SettlemenData.cart.original_total}}</span>
        </div>
      </div>
    </section>
    <!-- 订单备注与发票 -->
    <section class="pay_way container_style">
      <header class="header_style" @click="remark(SettlemenData.cart.id)">
        <span>订单备注</span>
        <div class="more_type">
          <span>{{!ReturnDataList?'口味、偏好等':ReturnDataList}}</span>
          <van-icon name="arrow" color="#999" size="0.55rem" />
        </div>
      </header>
      <section class="header_style" @click="InvoiceChe(SettlemenData.invoice.status_text)">
        <span>发票抬头</span>
        <div class="more_type" v-if="SettlemenData.invoice">
          <span>{{SettlemenData.invoice.status_text}}</span>
          <van-icon name="arrow" color="#999" size="0.55rem" />
        </div>
      </section>
    </section>
    <!-- 待支付 确认下单 -->
    <section class="confrim_order" v-if="SettlemenData.cart">
      <p>待支付 ¥{{SettlemenData.cart.original_total}}</p>
      <p @click="Settlement(SettlemenData.id,addressIndex.id,ReturnDataList,MenuData)">确认下单</p>
    </section>
    <van-action-sheet v-model="show" title="支付方式">
      <ul class="action" v-if="SettlemenData.payments">
        <li>
          <span>
            {{SettlemenData.payments[0].name}}
            <span>{{SettlemenData.payments[0].description}}</span>
          </span>
          <van-icon name="checked" size="0.75rem" color="#eeeeee" />
        </li>
        <li class="choose">
          <span>{{SettlemenData.payments[1].name}}</span>
          <van-icon name="checked" size="0.75rem" color="#4cd964" @click="show = false" />
        </li>
      </ul>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['SettlemenData', 'addressIndex', 'ShippingAddress', 'ReturnDataList', 'MenuData'])
  },
  methods: {
    //返回
    GOback() {
      this.$router.go(-1)
    },
    // 登录
    Login() {
      this.$router.push('/login')
    },
    // 添加收货地址
    chooseAdd() {
      this.$router.push('/confirmOrder/chooseAddress')
    },
    // 跳转订单备注
    remark(id) {
      this.$router.push('/confirmOrder/remark')
      this.$store.dispatch('remarkList', id)
    },
    // 跳转至发票抬头
    InvoiceChe(text) {
      this.$store.commit('InvoiceList', text)
      this.$router.push('/confirmOrder/invoice')
    },
    async Settlement(cart_id, address_id, description, entities) {
      const restaurant_id = window.sessionStorage.getItem('shopid')
      const user_id = window.sessionStorage.getItem('user_id')
      const { data: res } = await this.reques.post(`v1/users/${user_id}/carts/${cart_id}/orders`, {
        address_id,
        restaurant_id,
        geohash: '31.001395,112.211877',
        description,
        entities: [entities]
      })
      if (res.success === '下单成功，请及时付款') {
        this.$router.push('/confirmOrder/payment')
      }
      console.log(res)
    }
  },
  mounted() {
    this.$store.dispatch('getAddress', window.sessionStorage.getItem('user_id'))
  }
}
</script>

<style lang="less" scoped>
.action {
  min-height: 7rem;
  li {
    display: flex;
    justify-content: space-between;
    padding: 0 0.7rem;
    line-height: 2.5rem;
    align-items: center;
    span {
      font-size: 0.65rem;
      color: #ccc;
    }
  }
  .choose {
    span {
      color: #333;
    }
  }
}
.confirmOrderContainer {
  padding-bottom: 2.8rem;
}
.rightText {
  color: #fff;
}
.address_container {
  min-height: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.6rem;
  background-color: #fff;
  .address_empty_left {
    display: flex;
    align-items: center;
    .add_address {
      font-size: 0.65rem;
      color: #333;
      margin-left: 0.2rem;
    }
    .address_detail_container {
      margin-left: 0.2rem;
      header {
        font-size: 0.65rem;
        color: #333;
        span:first-of-type {
          font-size: 0.75rem;
          font-weight: 700;
        }
      }
      .address_detail {
        width: 100%;
        display: flex;
        align-items: center;
        span {
          color: #fff;
          border-radius: 0.15rem;
          height: 0.6rem;
          line-height: 0.6rem;
          padding: 0 0.2rem;
          margin-right: 0.3rem;
        }
        p {
          font-size: 0.55rem;
          color: #777;
        }
      }
    }
  }
}
.delivery_model {
  border-left: 0.2rem solid #3190e8;
  min-height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .deliver_text {
    font-size: 0.7rem;
    color: #333;
    font-weight: 700;
    padding-left: 0.3rem;
  }
  .deliver_time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    p:first-of-type {
      font-size: 0.6rem;
      color: #3190e8;
    }
    p:nth-of-type(2) {
      font-size: 0.5rem;
      color: #fff;
      background-color: #3190e8;
      width: 2.4rem;
      margin-top: 0.5rem;
      text-align: center;
      border-radius: 0.12rem;
      padding: 0.1rem;
    }
  }
}
.pay_way {
  .header_style {
    display: flex;
    justify-content: space-between;
    line-height: 2rem;
    span:first-of-type {
      font-size: 0.6rem;
      color: #666;
    }
    .more_type {
      display: flex;
      align-items: center;
      span:first-of-type {
        font-size: 0.55rem;
        color: #aaa;
        width: 10rem;
        text-align: right;
        vertical-align: middle;
      }
    }
  }
}
.hongbao {
  display: flex;
  justify-content: space-between;
  border-top: 0.025rem solid #f5f5f5;
  span {
    font-size: 0.55rem;
    color: #aaa;
    line-height: 2rem;
  }
}
.food_list {
  background-color: #fff;
  margin-top: 0.4rem;
  header {
    display: flex;
    align-items: center;
    padding: 0.7rem;
    img {
      width: 1.2rem;
      height: 1.2rem;
      vertical-align: middle;
    }
    p {
      margin-left: 0.2rem;
      font-size: 0.75rem;
      color: #333;
    }
  }
  .food_list_ul {
    padding-top: 0.5rem;
  }
}
.food_item_style {
  display: flex;
  justify-content: space-between;
  line-height: 1.8rem;
  padding: 0 0.7rem;
  .food_name {
    width: 10rem;
    font-size: 0.65rem;
    color: #666;
  }
  .num_price {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    span:first-of-type {
      color: #f60;
    }
    span:nth-of-type(2) {
      color: #666;
    }
  }
}
.total_price {
  border-top: 0.025rem solid #f5f5f5;
}
.food_name_left {
  width: 9.9rem !important;
}
.confrim_order {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2rem;
  p:first-of-type {
    background-color: #3c3c3c;
    flex: 5;
    padding-left: 0.7rem;
  }
  p:nth-of-type(2) {
    flex: 2;
    background-color: #56d176;
    text-align: center;
  }
  p {
    line-height: 2rem;
    font-size: 0.65rem;
    color: #fff;
  }
}
.container_style {
  background-color: #fff;
  margin-top: 0.4rem;
  padding: 0 0.7rem;
}
</style>